<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getBarcodeDetailAPI} from '@/api/code';
import type { KpcodeBarcodeScanEntity } from '@/types/code';
const detail = ref<KpcodeBarcodeScanEntity>()
const query = defineProps<{
  id: string
}>()

const getBarcodeDetail = async () => {
  if (query.id) {
    const res = await getBarcodeDetailAPI(query.id)
    detail.value = res.data
  }
}

onLoad(() => {
  getBarcodeDetail()
})
</script>

<template>
  <view class="form">
    <view class="form-content" v-if="detail">
      <view class="form-item">
        <text class="label">整装码编码</text>
        <text class="info">{{ detail.codeNo }}</text>
      </view>
      <view class="form-item">
        <text class="label">乐促码编码</text>
        <text class="info">{{ detail.activeCode }}</text>
      </view>
      <view class="form-item">
        <text class="label">乐促码类型</text>
        <text class="info">{{ detail.barcodeType=='1'?'自销码':'外销码' }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">发码商</text>
        <text class="info">{{ detail.actBusName }}</text>
      </view>
      <view class="form-item image_upload" v-if="detail.bindBusName">
        <text class="label">承销商</text>
        <text class="info">{{ detail.bindBusName }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">过期时间</text>
        <text class="info">{{ detail.expireTime }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">有效天数</text>
        <text class="info">{{ detail.liveDay }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">扫码时间</text>
        <text class="info">{{ detail.scannedTime }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">激活时间</text>
        <text class="info">{{ detail.activateTime }}</text>
      </view>
      <view class="form-item">
        <text class="label">状态</text>
        <view class="info">
          <view class="tag">{{
            detail.status == '1'
              ? '未激活'
              : detail.status == '2'
              ? '半激活'
              : detail.status == '3'
              ? '已激活'
              : detail.status == '4'
              ? '待中奖'
              : detail.status == '5'
              ? '未中奖'
              : detail.status == '6'
              ? '已中奖'
              : '已过期'
          }}</view>
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="form-btn-content">
      <button class="form-button">返回</button>
    </view>
  </view>
</template>

<style lang="scss">

// 表单
.form {
  background-color: #f4f4f4;
  padding-top: 10rpx;
  padding-bottom: 60rpx;
  height: 100vh;

  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }
    .tag {
      color: #27ba9b;
    }
  }
  .image_upload {
    height: auto;
  }
  &-button {
    height: 80rpx;
    width: 100%;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}
.form-btn-content {
  display: flex;
  justify-content: space-between;
}
.cancle {
  color: #fff;
  background-color: #e43d33;
}
</style>
